<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                template="/parkTemplate.xhtml"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:p="http://primefaces.org/ui">

    <ui:param name="tab" value="clientPanel"/>
    <ui:define name="title">
        #{bundle['client.panelTitle']}
    </ui:define>

    <ui:define name="tab-content">

        <p:tabView id="tabView" orientation="left" styleClass="tableText">
            <p:tab id="tab0" title="#{bundle['admin.home']}">
                <h:form id="form0">  

                    <p:editor id="editor"  value="#{welcomeEditor.htmlCode}" width="600"/>  

                    <h:panelGrid columns="2" style="margin-top:10px">  
                        <p:commandButton id="submitButton" value="#{bundle['admin.send']}" actionListener="#{welcomeEditor.saveTitleSite}" 
                                         icon="ui-icon-disk" />  
                        <p:commandButton id="clearButton" type="button" value="#{bundle['admin.clear']}" onclick="PF('editor').clear()"  
                                         icon="ui-icon-close" />  
                    </h:panelGrid>  

                    <p:dialog header="Content" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true">  
                        <h:outputText id="display" value="#{welcomeEditor.htmlCode}" escape="false" />  
                    </p:dialog>  

                </h:form> 

            </p:tab>
            <p:tab id="tab1" title="#{bundle['admin.news']}">
                <h:form id="form1">  

                    <p:editor id="editor" value="#{newsEditor.htmlCode}" width="600"/>  

                    <h:panelGrid columns="2" style="margin-top:10px">  
                        <p:commandButton id="submitButton" value="#{bundle['admin.send']}" actionListener="#{newsEditor.saveNewsSite}" 
                                         icon="ui-icon-disk" />  
                        <p:commandButton id="clearButton" type="button" value="#{bundle['admin.clear']}" onclick="PF('editor').clear()"  
                                         icon="ui-icon-close" />  
                    </h:panelGrid>  

                    <p:dialog header="Content" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true">  
                        <h:outputText id="display" value="#{newsEditor.htmlCode}" escape="false" />  
                    </p:dialog>  

                </h:form> 

            </p:tab>
            <p:tab id="tab2" title="#{bundle['admin.aboutUs']}">
                <h:form id="form2">  

                    <p:editor id="editor" value="#{aboutUsEditor.htmlCode}" width="600"/>  

                    <h:panelGrid columns="2" style="margin-top:10px">  
                        <p:commandButton id="submitButton" value="#{bundle['admin.send']}" actionListener="#{aboutUsEditor.saveAboutUsSite}" 
                                         icon="ui-icon-disk" />  
                        <p:commandButton id="clearButton" type="button" value="#{bundle['admin.clear']}" onclick="PF('editor').clear()"  
                                         icon="ui-icon-close" />  
                    </h:panelGrid>  

                    <p:dialog header="Content" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true">  
                        <h:outputText id="display" value="#{aboutUsEditor.htmlCode}" escape="false" />  
                    </p:dialog>  

                </h:form> 

            </p:tab>
            <p:tab id="tab3" title="#{bundle['admin.users']}">
                <h:form id="form3">  
                    <p:growl id="growl" showDetail="true" sticky="true" /> 
                    <p:dataTable id="cars" var="client" value="#{onlineClients.allOnlineClients}" rowKey="#{client.clientId}"  
                                 selection="#{onlineClients.userSelectedByAdmin}" selectionMode="single">  

                        <f:facet name="header">  
                            #{bundle['admin.usersInfo']}
                        </f:facet>  

                        <p:column headerText="#{bundle['admin.name']}">  
                            #{client.name}  
                        </p:column>  

                        <p:column headerText="#{bundle['admin.lastname']}">  
                            #{client.lastName}  
                        </p:column>  

                        <p:column headerText="#{bundle['admin.email']}" >  
                            #{client.email}  
                        </p:column>  

                        <p:column headerText="#{bundle['admin.lock']}">  
                            #{client.blocked}
                        </p:column>  

                        <f:facet name="footer">  
                            <p:commandButton id="viewButton" value="#{bundle['admin.UserButton']}" icon="ui-icon-search"  
                                             oncomplete="PF('clientDialog').show()"/>  
                        </f:facet>  
                    </p:dataTable>

                    <p:dialog id="dialog" header="#{bundle['admin.warning']}" widgetVar="clientDialog" resizable="false"  
                              width="200" showEffect="clip" hideEffect="fold">  
                        Czy napewno chcesz zablokować użytkownika #{onlineClients.userSelectedByAdmin.email} ?
                        <p:commandButton id="blockUser" value="#{bundle['admin.block']}" actionListener="#{onlineClients.blockUser()}" update="growl" oncomplete="PF('clientDialog').hide()"/>
                        <p:commandButton id="unblockUser" value="#{bundle['admin.unblock']}" actionListener="#{onlineClients.unblockUser()}" update="growl" oncomplete="PF('clientDialog').hide()"/>  
                    </p:dialog>
                </h:form>
            </p:tab>
            <p:tab id="tab4" title="#{bundle['admin.stats']}">
                <h:panelGrid columns="2">
                    <h:panelGroup>
                        <h:form>
                            <p:pieChart id="custom" value="#{charts.chartByCarType}" legendPosition="e" fill="false" showDataLabels="true"  
                                        title="#{bundle['admin.spacesByType']}" style="width:350px;height:300px" sliceMargin="5" diameter="150" />  
                            <p:commandButton type="button" value="Export" icon="ui-icon-extlink" onclick="exportChart()"/>  
                            <p:dialog widgetVar="dlg1" showEffect="fade" modal="true" header="#{bundle['admin.spacesByType']}">  
                                <p:outputPanel id="output" layout="block" style="width:600px;height:400px"/>  
                            </p:dialog>
                        </h:form>
                    </h:panelGroup>
                    <h:panelGroup>
                        <h:form>
                            <p:pieChart id="custom2" value="#{charts.chartByStatus}" legendPosition="e" fill="false" showDataLabels="true"  
                                        title="#{bundle['admin.spacesByState']}" style="width:350px;height:300px" sliceMargin="5" diameter="150" />
                            <p:commandButton type="button2" value="Export" icon="ui-icon-extlink" onclick="exportChart2()"/>  
                            <p:dialog widgetVar="dlg2" showEffect="fade" modal="true" header="#{bundle['admin.spacesByState']}">  
                                <p:outputPanel id="output2" layout="block" style="width:600px;height:400px"/>  
                            </p:dialog>
                        </h:form>
                    </h:panelGroup>
                </h:panelGrid>
                <script type="text/javascript">
                            function exportChart() {
                                $('#output').empty().append(PF('custom').exportAsImage());
                                PF('dlg1').show();
                            }
                            function exportChart2() {
                                $('#output2').empty().append(PF('custom2').exportAsImage());
                                PF('dlg2').show();
                            }
                </script>
            </p:tab>
        </p:tabView>
    </ui:define>
</ui:composition>
